/*
 * 产品列表
 * @Author: ljb
 * @Date: 2017-11-27 15:24:15
 * @Last Modified by: ljb
 * @Last Modified time: 2018-02-09 11:26:37
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

</style>
<template>
	<div class="v-admin-product-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="product"
			border/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';

export default {
	name: 'ProductIndex',
	props: ['loading', 'product', 'categories'],
	data() {
		return {
			columns: [
				{
					type: 'selection',
					width: 60,
					align: 'center',
				},
				// {
				//     title: '产品名称',
				//     key: 'name',
				//     align: 'center',
				//     render: (h,{row}) => {
				//         return <div> { row.name || '-' } </div>
				//     }
				// },
				{
					title: '产品类别',
					key: 'product_category_id',
					align: 'center',
					render: (h, { row }) => <div> { this.categories[row.product_category_id] || '-' } </div>,
				},
				{
					title: '主标题',
					key: 'title',
					align: 'center',
					render: (h, { row }) => <div> { row.title || '-' } </div>,
				},
				{
					title: '关键字',
					key: 'keywords',
					align: 'center',
					ellipsis: true,
					render: (h, { row }) => <span title={row.keywords}> { row.keywords || '-' } </span>,
				},
				{
					title: '产品描述',
					key: 'description',
					align: 'center',
					ellipsis: true,
					render: (h, { row }) => <span title={row.description}> { row.description || '-' } </span>,
				},
				// {
				//     title: '副标题',
				//     key: 'sub_title',
				//     align: 'center',
				//     render: (h,{row}) => {
				//         return <div> { row.sub_title || '-' } </div>
				//     }
				// },
				{
					title: '产品型号',
					key: 'model_number',
					align: 'center',
					render: (h, { row }) => <div> { row.model_number || '-' } </div>,
				},
				{
					title: '优先级',
					key: 'sort',
					align: 'center',
					render: (h, { row }) => <div> { row.sort || '-' } </div>,
				},
				{
					title: '预览图',
					key: 'thumb',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.thumb
								? <img src={ row.thumb } alt="无" width="50%"/>
								: '无'
						}
					</div>,
				},
				{
					title: '创建时间',
					key: 'created_at',
					width: 200,
					align: 'center',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: '操作',
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('edit', row.id); }} type="primary">修改信息</Button>
							<Button size="small" on-click={() => { this.$emit('delete', row.id); }} type="error">删除产品</Button>
						</div>),
				},
			],
		};
	},
	methods: {

	},
};
</script>
